<template>
    <nly-content-wrapper>
        <nly-content-header>
            <nly-row class="col-12 ">
                <nly-row class="col-12 ">
                    <nly-col xs="12" sm="12" md="12" lg="9" xl="9" class="form-inline " style="justify-content: left;">
                        <form-input name="name" title="菜单名称" id="name" labelStyle="" rightStyle="width:120px;"
                            class="ml-2" :readonly="show" v-model="postData.name"></form-input>
                    </nly-col>
                    <nly-col xs="12" sm="12" md="12" lg="3" xl="3" class="form-inline align-self-start"
                        style="justify-content: right;">

                        <nly-button-group>
                            <nly-button variant="info" @click="PageList" button-class="mr-2">查询</nly-button>
                            <nly-button variant="info" button-class="mr-2" @click="reset">重置</nly-button>
                            <nly-button variant="info" @click="AddMenu" button-class="mr-2">添加</nly-button>
                            <nly-button variant="info" @click="batchUpdateTreeSorts" button-class="mr-2">保存排序
                            </nly-button>
                            <!-- <nly-button
                  @click="showFunction"
                  variant="info"
                  button-class="mr-2"
                  ><nly-icon 
                    :icon="show ? 'fas fa-angle-down' : 'fas fa-angle-up'"
                  />{{ show ? "折叠" : "展开" }}</nly-button
                > -->
                        </nly-button-group>
                    </nly-col>
                </nly-row>
                <!-- <div class="tabpanel_tab_spacer"></div>
           <nly-row class="ml-1 mb-2 lr mt-4" v-show="show">
            <nly-col xs="12" sm="12" md="12" lg="12" xl="12"  class="form-inline " style="justify-content: left;">
              
              <form-input
                name="name"
                title="菜单名称"
                id="name"
                labelStyle=""
                rightStyle="width:120px;"
                class="ml-2"
                :readonly="show"
                v-model="postData.name"
              ></form-input>
            </nly-col>
          </nly-row> -->

            </nly-row>
            <nly-container fluid>

            </nly-container>
        </nly-content-header>
        <div class="tabpanel_tab_spacer"></div>

        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :components="components" :data-source="menuData" :scroll="{ x: 1500, y: 600 }"
                bordered :pagination="false" @expand="onTableExpand">
                <template slot="treeSort" slot-scope="text, record">
                    <editable-cell :text="text" @editableChange="onCellChange(record, 'treeSort', $event)"
                        :reg="numberReg" />
                </template>
            </a-table>
            <!-- modal 弹窗  -->
            <drag-modal class="menu-edit-drag-modal" :title="editItem.id ? '编辑菜单' : '新增菜单'" :visible="MenuVisible"
                @ok="onSubmit" @cancel="hideModal" width="1080px">
                <div class="form-inline mb-2">
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <input-group-search v-model="editItem.parentId" :defaultVal="parentMenu" title="上级菜单"
                            rightClass="col" treeType="menu"></input-group-search>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="菜单名称" rightClass="col" v-model="editItem.menuName" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-select title="菜单权重" rightClass="col" v-model="editItem.weight" :dataList="[
                            { key: 1, title: '默认权限' },
                            { key: 2, title: '二级管理员' },
                            { key: 3, title: '系统管理员' },
                            { key: 4, title: '超级管理员' }
                        ]"></form-select>
                    </nly-col>

                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-select title="组件名称" :selectStyle="{ 'width': '203px' }" rightClass="col"
                            v-model="editItem.component" :dataList="componentSelectList" showSearch addDefaultText="无">
                        </form-select>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="重 定 向" rightClass="col" v-model="editItem.redirect" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-radio title="缓存页面" rightClass="col" v-model="editItem.keepAlive" keyPre="menuType"
                            :dataList="[
                                { key: true, title: '是' },
                                { key: false, title: '否' }
                            ]"></form-radio>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-select title="菜单类型" rightClass="col" v-model="editItem.menuType" keyPre="menuType"
                            :dataList="[
                                { key: 1, title: '菜单' },
                                { key: 2, title: '权限' },
                                { key: 3, title: '内部菜单' },
                                { key: 4, title: '内部tab' },
                            ]"></form-select>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-select title="归属模块" rightClass="col" v-model="editItem.moduleCodes"
                            :dataList="moudelsArray" showSearch addDefaultText="无"></form-select>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="链　　接" rightClass="col" v-model="editItem.menuHref" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="页面地址" rightClass="col" v-model="editItem.viewPath" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="目　　标" rightClass="col" v-model="editItem.menuTarget" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="排　　序" rightClass="col" v-model="editItem.treeSort" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="权限标识" rightClass="col" v-model="editItem.permission" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <!-- <form-input
              title="菜单图标"
              rightClass="col"
              v-model="editItem.menuIcon"
              labelStyle=""
            ></form-input> -->
                        <div data-v-7b152c88="" class="form-group">
                            <label for="" class=""
                                style="font-weight: normal; justify-content: flex-end; padding-left: 5px; width: 162px; text-align: right;">菜单图标：</label>
                            <div class="col" style="width: 100%;">
                                <div class="pop-el-wrap">
                                    <i :class="editItem.menuIcon"></i>
                                    <a-button style="margin-left:10px" size="small"
                                        @click="ChooseIcon(editItem.menuIcon)">选择图标</a-button>
                                </div>
                            </div>
                        </div>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="字体颜色" rightClass="col" v-model="editItem.menuColor" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-radio title="是否可见" rightClass="col" v-model="editItem.isShow" keyPre="isShow" :dataList="[
                            { key: true, title: '是' },
                            { key: false, title: '否' }
                        ]"></form-radio>
                    </nly-col>
                </div>
                <a-divider>APP设置</a-divider>
                <div class="form-inline mb-2">
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-radio title="APP是否启用" rightClass="col" v-model="editItem.isAppEnable" keyPre="isAppEnable"
                            :dataList="[
                                { key: true, title: '是' },
                                { key: false, title: '否' }
                            ]"></form-radio>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="APP菜单名称" rightClass="col" v-model="editItem.appMenuName" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="APP菜单路径" rightClass="col" v-model="editItem.appPagePath" labelStyle="">
                        </form-input>
                    </nly-col>
                    <nly-col xs="12" sm="6" md="6" lg="4" xl="4" class="margin-bottom-10">
                        <form-input title="APP菜单图标" rightClass="col" v-model="editItem.appIcon" labelStyle="">
                        </form-input>
                    </nly-col>
                </div>
                <div class="form-inline mb-2">
                    <nly-col>
                        <!-- FormTextArea -->
                        <form-text-area title="备　　注" rightClass="col" v-model="editItem.remarks"></form-text-area>
                    </nly-col>
                </div>
                <template slot="footer">
                    <div>
                        <a-button type="primary" @click="onSubmit">确定</a-button>
                        <a-button @click="hideModal" class="margin-left-10">关闭</a-button>
                    </div>
                </template>
            </drag-modal>
            <!-- 图标弹窗 -->
            <a-modal title="选择图标" :visible="iconVisible" @ok="iconOK" @cancel="iconClose" width="500px">
                <div class="icon-wrapper">
                    <ul class="icon-ul">
                        <li v-for="(item, index) in iconArray" :key="index" class="icon-text"
                            v-bind:class="{ 'icon-active': iconSelected === index }" @click="checkYesIcon(item, index)">
                            <i class="icon-i nav-icon fa" :class="item"></i>
                        </li>
                    </ul>
                </div>
            </a-modal>

        </nly-content>
        <!-- <a-alert type="error" message="请选择菜单图标" v-if="checkIconClassBefor==''" /> -->
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { PageList, saveSysMenu, DeleteOne, batchUpdateTreeSorts } from "@/api/menu";
import * as moduleApi from "@/api/module";
import { constantRouterComponentsKeys } from "@/router/generator-routers";
import { listToMap } from "../../../utils/tool/map";
import { pageListToTree } from "@/utils/tree";
import { components } from "@/utils/antTableComponents";
import { iconArray } from "@/assets/icons/icon.js"
/**
 * 数组转树形结构
 * @param list 源数组
 * @param tree 树
 * @param parentId 父ID
 */
const listToTree = (list, tree, parentId) => {
    list.forEach(item => {
        // 判断是否为父级菜单
        if (item.parentId === parentId) {
            const child = {
                ...item,
                key: item.id,
                children: []
            };
            // 迭代 list， 找到当前菜单相符合的所有子菜单
            listToTree(list, child.children, item.id);
            // 删掉不存在 children 值的属性
            if (child.children.length <= 0) {
                delete child.children;
            }
            // 加入到树中
            tree.push(child);
        }
    });
};

export default {
    data() {

        const columns = [
            {
                title: "菜单名称",
                dataIndex: "menuName",
                key: "menuName",
                align: "left",
                // fixed:"left",
                width: 240,
                customRender: (text, row, index) => {
                    return (
                        <span>
                            <i class={row.menuIcon || ""} style="margin-right:5px;"></i>
                            <a href="javascript:;" onClick={() => this.showModal(row)}>
                                {text}
                            </a>
                        </span>
                    );
                }
            },
            {
                title: "模块名称",
                dataIndex: "moduleCodes",
                key: "moduleCodes",
                width: 80
            },
            {
                title: "组件",
                dataIndex: "component",
                key: "component",
                width: 150
            },
            {
                title: "页面地址",
                dataIndex: "viewPath",
                key: "viewPath",
                width: 260
            },
            {
                title: "链接",
                dataIndex: "menuHref",
                width: 200,
                key: "menuHref"
            },
            {
                title: "排序",
                dataIndex: "treeSort",
                width: 80,
                key: "treeSort",
                scopedSlots: { customRender: 'treeSort' },
            },
            {
                title: "类型",
                dataIndex: "menuType",
                width: 80,
                key: "menuType",
                customRender: (text, row, index) => {
                    let html = null;
                    switch (text) {
                        case 1: html = "菜单"; break;
                        case 2: html = <span style="color:#c243d6">权限</span>; break;
                        case 3: html = <span style="color:#c243d6">内部菜单</span>; break;
                        case 4: html = <span style="color:#c243d6">内部tab</span>; break;
                    }
                    return html;
                }
            },
            {
                title: "可见",
                dataIndex: "isShow",
                width: 80,
                key: "isShow",
                customRender: (text, row, index) => {
                    return text ? "显示" : <span style="color:#aaa;">隐藏</span>;
                }
            },
            {
                title: "权限标识",
                dataIndex: "permission",
                width: 240,
                key: "permission"
            },
            // {
            //   title: "创建时间",
            //   dataIndex: "createDate",
            //   key: "createDate",
            //   width: "80",
            // },
            {
                title: "操作",
                dataIndex: "o",
                // width: 200,
                key: "o",
                customRender: (text, row, index) => {
                    return (<div class="row justify-content-md-center">
                        <span class="col"></span>
                        <span class="col-sm-auto col-md-auto col-lg-auto col-xl-auto">
                            <a href="javascript:;" title="编辑菜单" class="mr-1 col-1" onClick={() => this.showModal(row)}><i class="fa fa-edit" style="color: #69aa46;"></i></a>
                            {row.treeLeaf ? <a href="javascript:;" title="删除菜单" class="mr-1 col-1" onClick={() => this.DeleteMenu(row)}><i class="fa fa-trash-alt" style="color: #dd5a43;"></i></a> : null}
                            {row.menuType != 2 ? <a href="javascript:;" title="添加下级菜单或者按钮权限" class="mr-1 col-1" onClick={() => this.AddChildMenu(row)}><i class="fa fa-plus-square"></i></a> : null}
                        </span>
                        <span class="col"></span>
                    </div>);

                }
            }
        ];


        const breadcrumbItem = [
            {
                text: "首页",
                to: "/",
                icon: "nlyfont nly-icon-home-fill"
            },
            {
                text: "系统管理",
                to: "/system"
            },
            {
                text: "菜单管理",
                to: "/system/menu",
                active: true
            }
        ];
        //表格 头部 可伸缩
        this.components = components(columns);
        return {
            postData: {
                "page.current": 1,
                "page.size": 1000,
                name: ""
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            haveExpandSet: new Set(),
            dataKeySet: new Set(),
            dataList: new Array(),
            menuData: [],
            columns,
            pagination: {
                defaultPageSize: 10,
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => `共 ${total} 条数据`,
                showSizeChanger: true,
                showQuickJumper: true,
                pageSizeOptions: ['10', '20', '30', '40', '50'],
            },
            breadcrumbItem,         //导航栏
            show: false,             //是否显示搜索条件
            editItem: {
                menuType: 1,
            },           //新增/编辑对象
            moduleList: [],          //所有模块
            TreeSortEditList: new Map(),    //菜单排序修改集合
            moduleCodes: "", //等于editItem.moduleCodes 模块值
            MenuVisible: false,     //菜单编辑框 是否显示
            expandedRowKeys: [],      //展开的行

            iconVisible: false, // 菜单图标
            iconArray: iconArray,
            iconSelected: -1,
            checkIconClassBefor: '',
            checkIconClass: 'fa-circle',
        };
    },
    mounted() {
        this.PageList();
        this.getModuleList();
    },
    computed: {
        parentMenu: function () {
            const map = new Map();
            map.set(this.editItem.parentId, "");
            return map;
        },
        moduleBoxChecked: {
            get: function () {
                return this.moduleCodes ? this.moduleCodes.split(',') : [];
            },
            set: function (arr) {
                this.moduleCodes = arr.join(",");
                this.editItem.moduleCodes = this.moduleCodes;
            }
        },
        moudelsArray: function () {
            let arr = new Array();
            this.moduleList && this.moduleList.forEach && this.moduleList.forEach((item) => {
                // arr.push({label:item.moduleName,value:item.moduleCode});
                arr.push({ title: item.moduleName, key: item.moduleCode });
            });
            console.log("moudelsArray", arr)
            return arr;
        },
        componentSelectList: function () {
            const dataList = new Array();
            constantRouterComponentsKeys().forEach(item => {
                dataList.push({ key: item, title: item });
            });
            return dataList;
        },
        ...mapState({
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        //添加
        AddMenu() {
            console.log("AddMenu...");
            this.editItem = { weight: 1, keepAlive: true, treeSort: 999, isShow: true, menuIcon: 'far fa-circle nav-icon', isAppEnable: false };
            this.moduleCodes = "";
            this.MenuVisible = true;
        },
        //添加子菜单
        AddChildMenu(menu) {
            this.editItem = {
                parentId: menu.id,
                weight: 1, keepAlive: true, treeSort: 999, isShow: true,
                menuIcon: 'far fa-circle nav-icon',
                isAppEnable: false
            };
            this.moduleCodes = "";
            this.MenuVisible = true;
        },
        //删除
        DeleteMenu(menu) {
            let _this = this;
            this.$confirm({
                title: '提示',
                content: '您确定要删除该菜单吗？',
                onOk() {
                    DeleteOne({ id: menu.id })
                        .then(response => {
                            if (response.code === 200) {
                                _this.$message.success("删除成功");
                                _this.dataList = _this.dataList.filter(f => f != menu);
                                let { menuData } = _this;
                                let removeId = menu.id;
                                let isFind = menuData.some(f => f.id == removeId);
                                if (isFind) {
                                    _this.menuData = menuData.filter(f => f.id != removeId);
                                    _this.show = true;
                                    _this.show = false;
                                } else {
                                    _this.removeFromMenuData(menuData, removeId)
                                }
                                // this.$nlyaModal.msgBoxOk("保存成功", {
                                //   title: "提示",
                                //   size: "sm",
                                //   buttonSize: "md",
                                //   okTitle: "确定",
                                //   titleTag: "h6",
                                //   headerClass: "p-2",
                                //   footerClass: "p-2",
                                //   hideHeaderClose: false,
                                //   centered: true
                                // });
                                //刷新 列表
                                // this.PageList();
                            }
                        })
                },
                onCancel() {
                },
            });
        },

        removeFromMenuData(itemList, removeId) {
            itemList && itemList.forEach(item => {
                let isFind = item.children && item.children.some(f => f.id == removeId)
                if (isFind) {
                    item.children = item.children.filter(f => f.id != removeId);
                    this.show = true;
                    this.show = false;
                    return false;
                } else {
                    this.removeFromMenuData(item.children, removeId)
                }
            })

        },
        //批量更新 菜单排序
        batchUpdateTreeSorts() {
            const postData = [...this.TreeSortEditList.values()];
            console.log("保存排序：", postData)
            if (postData.length == 0) {
                this.$info({
                    title: "提示",
                    content: '没有做任何修改',
                });
                return false;
            }
            batchUpdateTreeSorts(postData).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功");
                    //清空 this.TreeSortEditList
                    this.TreeSortEditList.clear();
                    //刷新 列表
                    this.PageList();
                }
            })
        },
        getModuleList() {
            const postData = {
                "page.current": 1,
                "page.size": 1000
            };
            moduleApi.PageList(postData).then(response => {
                console.log("获取模板列表", response);
                if (response.code === 200) {
                    const { data } = response;
                    const { records } = data;
                    this.moduleList = records;
                }
            })
                .catch(error => { });
        },
        // 获取菜单列表
        PageList() {
            this.menuData = [];
            const { postData } = this;
            PageList(postData)
                .then(response => {
                    console.log("获取菜单列表", response);
                    if (response.code === 200) {
                        const { data } = response;
                        const { records, total, current, size } = data;
                        this.dataList = records;
                        this.haveExpandSet.clear();
                        this.dataKeySet.clear();
                        this.dataKeySet = new Set(records.map(f => f.id));
                        const childrenNav = [];
                        pageListToTree(this.dataList, childrenNav, 0);
                        this.menuData.push(...childrenNav);
                        console.log("childrenNav", childrenNav)
                        Object.assign(this.pagination, {
                            total
                        });
                    }
                })
                .catch(error => { });
        },
        //查询 子集数据
        onTableExpand(expanded, record) {
            console.log("menu_展开的节点", expanded, record)
            if (!expanded || this.haveExpandSet.has(record.id)) return false;
            const postData = {
                "page.current": 1,
                "page.size": 1000,
                parentId: record.id
            };
            PageList(postData).then(response => {
                console.log(`获取：${record.menuName}——的子集`, response);
                if (response.code === 200) {
                    const { data } = response;
                    const { records } = data;
                    const { dataList } = this;
                    let addItem = [];
                    records.forEach(item => {
                        if (!this.dataKeySet.has(item.id)) {
                            item.key = item.id;
                            if (!item.treeLeaf) {
                                item.children = [];
                            }
                            addItem.push(item);
                            dataList.push(item);
                            this.dataKeySet.add(item.id);
                        }
                    });
                    record.children = addItem;
                    this.menuData = [...this.menuData];
                    this.haveExpandSet.add(record.id);
                }
            })
                .catch(error => { });
        },
        //获取 系统模块
        showFunction() {
            this.show = !this.show;
        },
        showModal(editItem) {
            console.log("editItem", editItem);
            this.editItem = { ...editItem };
            this.moduleCodes = editItem.moduleCodes;
            this.MenuVisible = true;
        },
        hideModal() {
            this.MenuVisible = false;
            //刷新列表数据
            // this.$nextTick(()=>{
            //   this.PageList();
            // })
        },
        onSubmit() {
            // this.$verify();
            //todo 检查数据格式（延迟处理）
            if (!this.editItem.menuType) {
                this.$message.warning('请选择菜单类型');
                return;
            }
            if (!this.editItem.menuName) {
                this.$message.warning('请填写菜单名称');
                return;
            }
            saveSysMenu(this.editItem)
                .then(response => {
                    const { code, data } = response;
                    if (code === 200) {
                        this.$message.success("保存成功");
                        let { dataList } = this;
                        let currentItem = dataList.find(f => f.id == data.id);
                        console.log("查询当前编辑的菜单", currentItem);
                        if (currentItem) {
                            Object.assign(currentItem, data);
                        } else {
                            let parentItem = dataList.find(f => f.id == data.parentId);
                            console.log("查询当前编辑的父级菜单", parentItem);
                            if (parentItem) {
                                parentItem.children.push(data);
                            }
                        }
                        this.hideModal();
                    }
                })

            // this.$nlyaModal
            //   .msgBoxConfirm("您确定要保存吗？", {
            //     title: "请确认是否需要马上保存",
            //     size: "sm",
            //     buttonSize: "md",
            //     okTitle: "是",
            //     cancelTitle: "否",
            //     titleTag: "h6",
            //     headerClass: "p-2",
            //     footerClass: "p-2",
            //     hideHeaderClose: false,
            //     centered: true
            //   })
            //   .then(value => {
            //     if (value) {


            //     }
            //   })
            //   .catch(err => {
            //     // An error occurred
            //     console.log(err);
            //   });
        },
        onTableChange(pagination, filters, sorter) {
            Object.assign(this.postData, {
                "page.current": pagination.current,
                "page.size": pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },

        onCellChange(item, dataIndex, editValue) {
            if (item[dataIndex] != editValue) {
                const edit = { id: item.id, [dataIndex]: editValue };
                this.TreeSortEditList.set(item.id, edit)
            } else {
                this.TreeSortEditList.delete(item.id);
            }
            console.log([...this.TreeSortEditList.values()])
        },
        reset() {
            this.postData = {
                "page.current": 1,
                "page.size": 1000,
                name: ""
            }
        },
        //选择图标
        ChooseIcon() {
            this.iconVisible = true;
        },
        checkYesIcon(item, index) {
            this.iconSelected = index
            this.checkIconClassBefor = item;
        },
        iconOK() {
            if (this.checkIconClassBefor == '' || this.checkIconClassBefor == null) {
                this.$message.error('请选择菜单图标', 2);
                return;
            } else {
                this.checkIconClass = this.checkIconClassBefor;
                this.editItem.menuIcon = 'fa nav-icon ' + this.checkIconClass
                this.iconClose();
            }
        },
        iconClose() {
            this.iconVisible = false;
        }
    },
    watch: {
        "editItem.parentId": function (newval, oldval) {
            console.log("editItem.parentId", newval);
        },
        "editItem.moduleCodes": function (newval, oldval) {
            console.log("editItem.moduleCodes", newval);
        },
        "editItem.menuName": function (newval, oldval) {
            console.log("editItem.menuName", newval);
        },
        "editItem.menuIcon": function (newval, oldval) {
            console.log("editItem.menuIcon", newval);
        },
        treeData: function (newval, oldval) {
            console.log("treeData", newval);
        }
    }
};
</script>
<style lang="less" scoped>
::v-deep {
    .ant-input {
        height: auto !important;
        padding: 0 !important;
    }
}

.icon-wrapper {
    margin-top: 20px;
    width: 470px;
    height: 400px;
    overflow-y: scroll;

    .icon-ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 0;
        padding-right: 0;
    }

    .icon-text {
        cursor: pointer;

        .icon-i {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 35px;
        }
    }

    .icon-text:hover {
        background: rgba(24, 144, 255, 0.3);
        color: #fff;
    }

    .icon-active {
        background: #1890ff;
        color: #fff;
    }
}
</style>
<style lang="less">
.menu-edit-drag-modal {

    .ant-select-sm .ant-select-selection--single,
    .ant-input-search,
    .ant-input {
        height: 32px !important;
    }
}
</style>
